<template>
	<!-- 这是title部分 -->
	<view class="title">
		<view class="title_leftbox" @click="goToIndex">
			<image class="title_left_fanhui" src="../../static/返回.png"></image>
		</view>
		<view class="title_middlebox">
			<view class="title_middle_textbox">
				<view class="title_middle_textbox_sfc" @click="xuanzhong(1)" :class="{select: xz === 1}">胜负彩</view>
				<view class="title_middle_textbox_rxj" @click="xuanzhong(2)" :class="{select: xz === 2}">任选九场</view>
			</view>
		</view>
		<view class="title_rightbox">
			<view class="title_right_text">帮助</view>
		</view>
	</view>
	<!-- 这是tab部分 -->
	<view class="tabbox">
		<scroll-view class="tab" scroll-x>
			<view class="group">
				<view class="xuanxiang" :class="{ 'active': currentTab === '24150期（销售中）' }"
					@click="switchTab('24150期（销售中）')">
					<view class="xuanxiang_text"> 24150期（销售中）</view>
				</view>
				<view class="xuanxiang" :class="{ 'active': currentTab === '24151期（销售中）' }"
					@click="switchTab('24151期（销售中）')">
					<view class="xuanxiang_text"> 24151期（销售中）</view>
				</view>
				<view class="xuanxiang" :class="{ 'active': currentTab === '24152期（销售中）' }"
					@click="switchTab('24152期（销售中）')">
					<view class="xuanxiang_text"> 24152期（销售中）</view>
				</view>
				<view class="xuanxiang" :class="{ 'active': currentTab === '24153期（销售中）' }"
					@click="switchTab('24153期（销售中）')">
					<view class="xuanxiang_text"> 24153期（销售中）</view>
				</view>
				<view class="xuanxiang" :class="{ 'active': currentTab === '24154期（销售中）' }"
					@click="switchTab('24154期（销售中）')">
					<view class="xuanxiang_text"> 24154期（销售中）</view>
				</view>
				<view class="xuanxiang" :class="{ 'active': currentTab === '24155期（销售中）' }"
					@click="switchTab('24155期（销售中）')">
					<view class="xuanxiang_text"> 24155期（销售中）</view>
				</view>
			</view>
		</scroll-view>
	</view>
	<!-- 内容区域 -->
	<view class="xialabox" v-if="currentTab === '24150期（销售中）'">
		<view class="bisaibox_saishibox">

			<view class="bisaibox_nrbox">

				<view class="bisaibox_nrbox_leftbox">
					<view class="bisaibox_nrbox_leftbox_text1">1</view>
					<view class="bisaibox_nrbox_leftbox_text2">欧罗巴</view>
					<view class="bisaibox_nrbox_leftbox_text3">21:58</view>
					<view class="bisaibox_nrbox_leftbox_text3">21:58开赛</view>
					<view class="bisaibox_nrbox_leftbox_text4">分析</view>
				</view>

				<view class="bisaibox_nrbox_rightbox">
					<view class="bisaibox_saishibox1">
						<view class="bisaibox_textbox1">
							<view class="bisaibox_textbox_text1"></view>
							<view class="bisaibox_textbox_text2">费内巴</view>
						</view>
						<view class="bisaibox_textbox2">
							<view class="bisaibox_textbox_text">VS</view>
						</view>
						<view class="bisaibox_textbox1">
							<view class="bisaibox_textbox_text2">胜吉联</view>
							<view class="bisaibox_textbox_text1"></view>
						</view>
					</view>

					<view class="bisaibox_nrbox_rightbox_textbox">
						<view class="bisaibox_nrbox_rightbox_textbox2">
							<view class="bisaibox_nrbox_rightbox_textbox21">3</view>
							<view class="bisaibox_nrbox_rightbox_textbox22">
								<view class="bisaibox_nrbox_rightbox_text">胜 1.15</view>
								<image class="bisaibox_nrbox_rightbox_image"
									src="../../static/llvsexiangxiajiantou.png"></image>
							</view>
						</view>
						<view class="bisaibox_nrbox_rightbox_textbox2">
							<view class="bisaibox_nrbox_rightbox_textbox21">1</view>
							<view class="bisaibox_nrbox_rightbox_textbox22">
								<view class="bisaibox_nrbox_rightbox_text">平 6.63</view>
								<image class="bisaibox_nrbox_rightbox_image"
									src="../../static/llvsexiangxiajiantou.png"></image>
							</view>
						</view>
						<view class="bisaibox_nrbox_rightbox_textbox2">
							<view class="bisaibox_nrbox_rightbox_textbox21">0</view>
							<view class="bisaibox_nrbox_rightbox_textbox22">
								<view class="bisaibox_nrbox_rightbox_text">负 9.15</view>
								<image class="bisaibox_nrbox_rightbox_image"
									src="../../static/llvsexiangxiajiantou.png"></image>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="xialabox" v-else-if="currentTab === '24151期（销售中）'">
		123
	</view>
	<!-- 其他标签内容区域 -->
	<!-- 以下是底部tabbar -->
	<view class="dibutabbar">
		<view class="dibuleft">
			<view class="lajitong">
				<image class="imgljt" src="../../static/ljt.png"></image>
			</view>
			<view class="dibutextbox">
				<view class="dibutext1">已关注0场</view>
				<view class="dibutext2">至少选中{{ xz === 1 ? '14' : '9' }}场比赛</view>
			</view>
		</view>
		<view class="diburight">
			<view class="textxyb">下一步</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: '24150期（销售中）', // 默认选中第一个标签
				xz: 1, // 默认选中qiehuan1
			}
		},
		methods: {
			// 切换tab
			switchTab(tabName) {
				this.currentTab = tabName;
			},

			xuanzhong(titlexz) {
				this.xz = titlexz;
			},
			// 跳转到首页的方法
			goToIndex() {
				// 在tabbar中使用uniapp的switchTab方法跳转
				uni.switchTab({
					url: '/pages/index/index', // 首页路径
				});
			}
		}
	}
</script>

<style>
	/* 标题样式 */
	.title {
		background-color: rgb(226, 50, 52);
		display: flex;
		align-items: center;
		padding: 2%;
	}

	.title_left_fanhui {
		width: 24px;
		height: 24px;
	}

	.title_middlebox {
		flex: 1;
	}

	.title_middle_textbox {
		display: flex;
		border: 1px solid white;
		color: white;
		font-size: 15px;
		width: 45%;
		margin: 0 auto;
		border-radius: 5px;
	}

	.title_middle_textbox_sfc {
		text-align: center;
		color: white;
		padding: 4%;
	}

	.title_middle_textbox_rxj {
		flex: 1;
		text-align: center;
		color: white;
		padding: 4%;
	}

	/* 选中的样式 */
	.select {
		background: white;
		color: red;
	}

	.title_rightbox {
		font-size: 17px;
		font-weight: 500;
		color: white;
	}

	/* tab栏 */
	.tabbox {
		background-color: #fbe5e5;
		display: flex;
	}

	.tab {
		display: flex;
		text-align: center;
		/*   line-height: 45rpx; */
	}

	.group {
		width: 100%;
		white-space: nowrap;
	}

	.xuanxiang {
		width: 35%;
		font-size: 14px;
		display: inline-block;
		padding: 2%;
	}

	.active {
		color: #e23234;
		position: relative;
		border-bottom: 1px solid #e23234;
	}


	.bisaibox {
		background-color: white;
		/* padding: 2%; */
	}

	.bisaibox_saishibox {
		border-bottom: 1px solid #eee;
		padding: 2% 2% 6% 2%;
	}

	.bisaibox_saishibox1 {
		display: flex;
		    margin-bottom: 5%;
		    margin-top: 5%;
	}


	.bisaibox_textbox1 {
		width: 35%;
		    display: flex;
		    align-items: center;
		    justify-content: center;
	}

	.bisaibox_textbox2 {
		width: 30%;
		    text-align: center;
			}

	.bisaibox_textbox_text {
		    font-size: 15px;
	}

/* 	.bisaibox_textbox_text1 {
		color: rgb(153, 153, 153);
		font-size: 9px;
	} */

	.bisaibox_textbox_text2 {
		font-size: 15px;
	}

	.bisaibox_nrbox {
		display: flex;
	}

	.bisaibox_nrbox_leftbox {
		width: 16%;
		text-align: center;
		padding: 2%;
	}

	.bisaibox_nrbox_leftbox_text1 {
		font-size: 12px;
	}

	.bisaibox_nrbox_leftbox_text2 {
		color: rgb(24, 181, 102);
		font-size: 15px;
	}

	.bisaibox_nrbox_leftbox_text3 {
		    font-size: 12px;
		    text-align: center;
		    color: #999;
	}

	.bisaibox_nrbox_leftbox_text4 {
		font-size: 12px;
		color: red;
	}

	.bisaibox_nrbox_rightbox {
		width: 80%;
	}

	.bisaibox_nrbox_rightbox_textbox {
		display: flex;
		    /* height: 45px; */
		    align-items: center;
	}



	.bisaibox_nrbox_rightbox_textbox2 {
		    width: 46%;
		    text-align: center;
		    border: 1px solid #ccc;
		    box-sizing: border-box;
		    height: 40px;
		    display: flex;
		    align-items: center;
		    flex-wrap: wrap;
		    justify-content: center;
	}
	.bisaibox_nrbox_rightbox_text{
		    color: #999999;
		    font-size: 13px;
	}


	.bisaibox_nrbox_rightbox_textbox21 {
		    font-size: 10px;
		    width: 100%;
	}

	.bisaibox_nrbox_rightbox_textbox22 {
		    font-size: 10px;
		    display: flex;
		    align-items: center;
		    justify-content: center;
		    width: 100%;
	}




	.bisaibox_nrbox_rightbox_image {
		width: 4px;
		height: 8px;
	}




	/* 底部 */
	.dibutabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		/* justify-content: space-between; */
		/* background-color: #fbe5e5; */
		box-shadow: 0 -1px 10px rgba(0, 0, 0, 0.1);
	}

	.dibuleft {
		width: 73%;
		display: flex;
		/* justify-content: center; */
		align-items: center;
		background-color: #fbe5e5;
		padding: 1%;
	}

	/* 	.lajitong {
			margin-right: 10%;
		} */

	.imgljt {
		width: 24px;
		height: 24px;
		/* height: 2; */
		display: block;
	}

	.dibutextbox {
		text-align: center;
		flex: 1;
	}

	.dibutext1 {
		font-size: 9px;
	}

	.dibutext2 {
		color: rgb(248, 150, 23);
		font-size: 9px;
	}

	.diburight {
		width: 23%;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #808080;
		color: white;
		padding: 1%;
		font-size: 12px;
	}
</style>
